import React, { useState, useEffect } from 'react';
import { InputNumber, Popover, Select, Input } from 'antd';
import { SketchPicker, ColorResult } from 'react-color';
import styles from './index.less';
import {
  BorderOuterOutlined,
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined
} from '@ant-design/icons';
import { memo } from 'react';
import { connect } from '@/.umi/plugin-dva/exports';
import { findNodeById } from '@/utils';

type IBorder = {} & API.IPadding;

function Border(props: IBorder) {
  const { project, saveNodeChange } = props;
  console.log('project: ', project);
  const currentComponent: API.Node | undefined = findNodeById(project.pageConfig, project.currentCompId);
  if (currentComponent) {
    // TODO.
  }
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [color, setColor] = useState('#000');
  /**
   * 监听拾色器变化
   * @param value 颜色值
   */
  function handleColorChange(value: ColorResult) {
    console.log('颜色变动: ', value);
    setColor(`rgba(${value.rgb.r},${value.rgb.g},${value.rgb.g},${value.rgb.a})`);
    setShowColorPicker(false);
  }

  function handleSwatchHover(value) {
    console.log('handleSwatchHover: ', value);
  }
  const borderPositionContent = (
    <div className={styles.borderContent}>
      <i className={`${styles.top} ${styles.selected}`}></i>
      <i className={styles.left}></i>
      <i className={styles.bottom}></i>
      <i className={styles.right}></i>
    </div>
  );
  function setShowPicker(e: MouseEvent) {
    e.stopPropagation();
    setShowColorPicker(true);
  }
  // 添加监听事件
  useEffect(() => {
    document.body.addEventListener('click', function () {
      setShowColorPicker(false);
    });
  }, []);

  const radiusContent = (
    <ul className={styles.borderPosition}>
      <li>
        <RadiusUpleftOutlined className={styles.icon} />
        <InputNumber size="small" defaultValue={0} min={0} />
        <span>px</span>
      </li>
      <li>
        <RadiusUprightOutlined className={styles.icon} />
        <InputNumber size="small" defaultValue={0} min={0} />
        <span>px</span>
      </li>
      <li>
        <RadiusBottomleftOutlined className={styles.icon} />
        <InputNumber size="small" defaultValue={0} min={0} />
        <span>px</span>
      </li>
      <li>
        <RadiusBottomrightOutlined className={styles.icon} />
        <InputNumber size="small" defaultValue={0} min={0} />
        <span>px</span>
      </li>
    </ul>
  );

  useEffect(() => {
    document.querySelector('.ant-drawer-body')?.addEventListener('click', () => setShowColorPicker(false));
  }, []);
  return (
    <ul className={`${styles.wAndH} ${styles.padding}`}>
      <li>
        <label>类型</label>
        <Select className={styles.inputBox}>
          <Select.Option value="line">
            <i className={styles.line}></i>
          </Select.Option>
          <Select.Option value="dashed">
            <i className={`${styles.line} ${styles.dashed}`}></i>
          </Select.Option>
        </Select>
      </li>
      <li>
        <label>粗细</label>
        <InputNumber min={0} defaultValue={1} className={styles.inputBox} />
        <Popover placement="bottomRight" content={borderPositionContent}>
          <BorderOuterOutlined className={styles.borderIcon} />
        </Popover>
      </li>
      <li>
        <label>颜色</label>
        <Input className={styles.inputBox} />
        <div className={styles.colorSelector} style={{ backgroundColor: color }} onClick={setShowPicker}></div>
        {showColorPicker &&
          <span onClick={e => e.stopPropagation()}><SketchPicker
            className={styles.colorPicker}
            width="300px"
            color={color}
            onSwatchHover={handleSwatchHover}
            onChangeComplete={handleColorChange}
          /></span>
        }
      </li>
      <li>
        <label>圆角</label>
        <InputNumber defaultValue={0} min={0} className={styles.inputBox} />
        <Popover placement="bottomLeft" content={radiusContent}>
          <RadiusBottomleftOutlined className={styles.borderIcon} />
        </Popover>
      </li>
    </ul>
  );
}

export default connect(
  ({ project }: any) => ({ project }),
  {
    saveNodeChange: (payload: { style: React.CSSProperties }) => ({ type: 'project/saveNodeChange', payload })
  }
)(memo(Border));